<template>
	<div>
		<h3 style="font-weight: bold;">帖子详情</h3>
		<h4 style="font-weight: bold;">帖子Id：</h4>
		<h4>{{currentSelectContent.contentid}}</h4>
		<h4 style="font-weight: bold;">标题：</h4>
		<h4>{{currentSelectContent.title}}</h4>
		<h4 style="font-weight: bold;">内容：</h4>
		<h4 class="post-text" style="white-space: pre-line; ">{{currentSelectContent.contenttext}}</h4>
		<div v-if="currentSelectContent.contenttype!=2 &&currentSelectContent.isspecial!=3 &&currentSelectContent.isspecial!=4"
			style="display: flex; margin-bottom: 20px;">
			<div style="margin-left: 10px;" v-for="mediaItem in currentSelectContent.contenturl">
				<el-image style="width: 100px; height: 100px" :src="mediaItem" fit="contain"
					:preview-src-list="currentSelectContent.contenturl"></el-image>
			</div>
		</div>
		<div v-if="currentSelectContent.place">
			<h4 style="font-weight: bold;">联系方式：</h4>
			<h4>{{currentSelectContent.place}}</h4>
		</div>
		<div style="display: flex; flex-wrap: wrap;">
			<div style="display: flex; align-items: center;margin-right: 100px;">
				<div style="font-weight: bold;">创建时间：</div>
				{{formatDateTime(currentSelectContent.createtime)}}
			</div>
			<div style="display: flex; align-items: center;">
				<div style="font-weight: bold;">更新时间：</div>
				{{formatDateTime(currentSelectContent.updatetime)}}
			</div>
		</div>
		<div style="display: flex; margin: 20px 0; align-items: center;flex-wrap: wrap;">
			<div style="margin-right: 100px; display: flex; align-items: center;">
				<div style="font-weight: bold;">评论数：</div>
				{{currentSelectContent.commentnum}}
			</div>
			<div style="margin-right: 100px; display: flex; align-items: center;">
				<div style="font-weight: bold;">点赞数：</div>
				{{currentSelectContent.upnum}}
			</div>
			<div style="margin-right: 100px; display: flex; align-items: center;">
				<div style="font-weight: bold;">阅读人数：</div>
				{{currentSelectContent.realreadnum}}
			</div>
			<div style="margin-right: 100px; display: flex; align-items: center;">
				<div style="font-weight: bold;">阅读次数：</div>
				{{currentSelectContent.readnum}}
			</div>
			<div style="margin-right: 100px; display: flex;">
				<div style="font-weight: bold;">被举报数：</div>
				{{currentSelectContent.informnum}}
			</div>
		</div>
		<!-- <div style="display:flex">
			<el-badge :value="currentSelectContent.commentnum" class="item">
				<el-button size="small" icon="el-icon-chat-dot-square">评论数</el-button>
			</el-badge>
			<el-badge :value="currentSelectContent.upnum" class="item">
				<el-button size="small" icon="el-icon-caret-top">
					点赞数</el-button>
			</el-badge>
			<el-badge :value="currentSelectContent.upnum" class="item">
				<el-button size="small" icon="el-icon-caret-bottom">点踩数</el-button>
			</el-badge>
			<el-badge :value="currentSelectContent.forwardnum" class="item">
				<el-button size="small" icon="el-icon-share">转发数</el-button>
			</el-badge>
			<el-badge :value="currentSelectContent.realreadnum" class="item">
				<el-button size="small" icon="el-icon-document">阅读人数</el-button>
			</el-badge>
			<el-badge :value="currentSelectContent.readnum" class="item">
				<el-button size="small" icon="el-icon-document">阅读次数</el-button>
			</el-badge>
			<el-badge :value="currentSelectContent.informnum" class="item">
				<el-button size="small" icon="el-icon-error">举报数</el-button>
			</el-badge>
		</div> -->
		<hr>
		<div style="margin-top:10px">
			<h3 style="font-weight: bold;">帖子评论</h3>
			<el-row :gutter="10" class="mb8">
				<el-col :span="1.5">
					<el-button type="primary" plain icon="el-icon-plus" size="mini"
						@click="handleCommentAdd(currentSelectContent)">新增评论
					</el-button>
				</el-col>
			</el-row>
			<el-table v-loading="loading" :data="mainCommentList" :default-expand-all="true">
				<el-table-column label="评论人员昵称" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="toUserPage(scope.row)">{{scope.row.nickname}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="评论内容" align="center" prop="commenttext" />
				<el-table-column label="评论图片" align="center" prop="commenturl">
					<template slot-scope="scope">
						<image-preview :src="scope.row.commenturl" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="回复对象" align="center" prop="replynickname" />
				<el-table-column label="点赞数" align="center" prop="upnum" />
				<el-table-column label="创建时间" align="center" prop="createtime" width="180">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createtime) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="评论状态" align="center" prop="commentstate">
					<template slot-scope="scope">
						<dict-tag :options="dict.type.bbs_comment_state" :value="scope.row.commentstate" />
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleCommentAdd(scope.row)">
							评论
						</el-button>
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleComment(scope.row)">修改
						</el-button>
					</template>
				</el-table-column>
				<el-table-column type="expand" style="margin-left: 10px;">
					<template slot-scope="scope">
						<el-table v-loading="loading" :data="scope.row.children" :show-header="false"
							v-if="scope.row.children.length>0">
							<el-table-column label="评论人员昵称" align="center">
								<template slot-scope="scope">
									<el-button size="mini" type="text" @click="toUserPage(scope.row)">
										{{scope.row.nickname}}
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="评论内容" align="center" prop="commenttext" />
							<el-table-column label="评论图片" align="center" prop="commenturl">
								<template slot-scope="scope">
									<image-preview :src="scope.row.commenturl" :width="50" :height="50" />
								</template>
							</el-table-column>
							<el-table-column label="回复对象" align="center" prop="replynickname" />
							<el-table-column label="点赞数" align="center" prop="upnum" />
							<el-table-column label="创建时间" align="center" prop="createtime" width="180">
								<template slot-scope="scope">
									<span>{{ parseTime(scope.row.createtime) }}</span>
								</template>
							</el-table-column>
							<el-table-column label="评论状态" align="center" prop="commentstate">
								<template slot-scope="scope">
									<dict-tag :options="dict.type.bbs_comment_state" :value="scope.row.commentstate" />
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
								<template slot-scope="scope">
									<el-button size="mini" type="text" icon="el-icon-edit"
										@click="handleCommentAdd(scope.row)">评论
									</el-button>
									<el-button size="mini" type="text" icon="el-icon-edit"
										@click="handleComment(scope.row)">修改
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--渲染评论-->
		<div class="dialog-footer">
			<el-button @click="closeContentDetail">取 消</el-button>
			<el-button type="primary" @click="closeContentDetail">确 定</el-button>
		</div>

		<!--新建评论modal-->
		<el-dialog :title="title" :visible.sync="createCommentOpen" width="500px" append-to-body>
			<el-form ref="createCommentForm" :model="createCommentForm" :rules="rules" label-width="80px">
				<el-form-item label="评论者" prop="userid">
					<el-select v-model="createCommentForm.userid" placeholder="请选择发帖人" clearable>
						<el-option v-for="user in robotList" :key="user.userid" :label="user.nickname"
							:value="user.userid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="评论内容" prop="commenttext">
					<el-input type="textarea" v-model="createCommentForm.commenttext" placeholder="请输入评论内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitCreateComment">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!--修改评论状态-->
		<el-dialog :title="title" :visible.sync="commentOpen" width="500px" append-to-body @close="cancelEditComment">
			<div>
				<el-form ref="commentForm" :model="commentForm" :rules="commentRules" label-width="80px">
					<el-form-item label="评论状态" prop="commentstate">
						<el-select v-model="commentForm.commentstate" placeholder="请选择状态">
							<el-option v-for="dict in dict.type.bbs_comment_state" :key="dict.value" :label="dict.label"
								:value="dict.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="创建时间" prop="createtime">
						<el-date-picker clearable v-model="commentForm.createtime" type="datetime"
							placeholder="请选择创建时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item v-if="commentForm.commentstate!=commentOldForm.commentstate" label="操作记录备注"
						prop="note">
						<el-input v-model="operatinForm.note" placeholder="请输入操作记录备注" />
					</el-form-item>
				</el-form>
				<userUpdateForm v-if="showUserUpdateForm" ref="userUpdateFormComment" :currentUserId="targetRow.userid"
					:currentSchoolId="currentSelectContent.schoolid">
				</userUpdateForm>

			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitCommentForm">确 定</el-button>
				<el-button @click="cancelEditComment">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listContent,
		getContent,
		updateContent,
		listContentVo,
		deletePostInRedisById,
		deleteTopPostInRedis,
		deletePostListInRedis,
		updatePostInfoInRedisById
	} from "@/api/bbs_content/content";
	import {
		listComment,
		getComment,
		delComment,
		addComment,
		updateComment,
		getCommentById,
		updateCommentState,
		getCommentVoById,
		deleteCommentListInRedis
	} from "@/api/bbs_comment/comment";
	import {
		addBbs_operation_record,
	} from "@/api/bbs_operation_record/bbs_operation_record";
	import userUpdateForm from "../../components/userInfo/updateForm.vue"
	export default {
		name: 'contentDetail',
		props: {
			currentContentId: String,
			robotList: Array
		},
		dicts: ['bbs_true_or_false', 'bbs_user_type', 'bbs_user_state', 'bbs_comment_state'],
		components: {
			userUpdateForm,
		},
		data() {
			return {
				title: '',
				// 遮罩层
				loading: true,
				// 是否显示评论创建弹出层
				createCommentOpen: false,
				// 是否显示评论弹出层
				commentOpen: false,
				commentRules: {},
				//控制帖子详情打开关闭的变量
				contentVisible: false,
				currentSelectContent: "",
				ismain: [{
						value: 0,
						label: '是'
					},
					{
						value: 1,
						label: '否'
					}
				],
				rules: '',
				//【评论列表
				commentList: null,
				//主评论列表
				mainCommentList: [],
				//子评论列表
				replyCommentList: [],
				//操作记录有关
				userOldForm: {},
				contentOldForm: {},
				commentOldForm: {},
				operatinForm: {
					// id: null,
					schoolId: null,
					recordState: 1,
					operator: null,
					targetKind: null,
					targetId: null,
					changeInfo: null,
					note: null,
					// operateTime: null,
					// bannedTime: null,
					// createTime: null,
					// updateTime: null
				},
				showUserUpdateForm: false,
				targetRow: {},
				currentSelectContent: "",
				contentVisible: false,
				//创建新评论
				createCommentForm: {
					userid: null,
					commenttext: null,
					contentid: null,
					ismain: null,
					isreply: null,
					replycommentid: null,
					replyuserId: null,
				},
				//评论表单
				commentForm: {},
			}
		},
		created() {
			console.log("帖子详情", this.currentContentId)
			this.onShowContentDetail()
		},
		activated() {
			console.log("显示触发")
			this.onShowContentDetail()
		},
		methods: {
			onShowContentDetail() {
				const contentid = this.currentContentId;
				getContent(contentid).then(response1 => {
					console.log("哈哈哈")
					this.currentSelectContent = response1.data;
					//字典需要处理为字符型
					// this.currentSelectContent.contentstate = this.contentStateForm.contentstate.toString();
					// this.currentSelectContent.visiblerange = this.contentStateForm.visiblerange.toString()
					this.contentVisible = true;
					if (this.currentSelectContent.contenttype == 2) {
						this.currentSelectContent.isspecial = 3
					} else if (this.currentSelectContent.contenttype == 3) {
						this.currentSelectContent.isspecial = 1
					} else if (this.currentSelectContent.contenttype == 4) {
						this.currentSelectContent.isspecial = 2
					} else {

					}
					//兼容旧版类型
					if (this.currentSelectContent.contenttype < 5 && this.currentSelectContent.contenttype != 1) {
						this.currentSelectContent.contenttype = 5
					} else {

					}


					if (this.currentSelectContent.contenturl) {
						this.currentSelectContent.contenturl = this.currentSelectContent.contenturl.split(',')
					} else {
						this.currentSelectContent.contenturl = []
					}
					console.log("这是什么", this.currentSelectContent)
				});
				this.getCommentVos(this.currentContentId);
			},
			//根据id获取其下的所有评论
			getCommentVos(id) {
				this.mainCommentList = [];
				this.replyCommentList = [];
				//获取评论
				getCommentVoById(id).then(response => {
					this.commentList = response.data;
					console.log(this.commentList)
					for (var i = 0; i < response.data.length; i++) {
						if (response.data[i].ismain == 1) {
							this.mainCommentList.push(response.data[i])
						} else {
							this.replyCommentList.push(response.data[i])
						}
					}
					for (var i = 0; i < this.mainCommentList.length; i++) {
						this.mainCommentList[i].children = [];
						for (var j = 0; j < this.replyCommentList.length; j++) {
							if (this.mainCommentList[i].commentid == this.replyCommentList[j].replycommentid) {
								this.mainCommentList[i].children.push(this.replyCommentList[j])
							}
						}
					}
					console.log('主', this.mainCommentList)
					console.log('子', this.replyCommentList)
					this.loading = false;
				})
			},
			formatDateTime(date) {
				//date是传入的时间
				let d = new Date(date);
				let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
				let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
				let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
				let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
				let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
				let times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ":" + sec;
				return times;
			},
			closeContentDetail() {
				this.$emit('closeContentDetail');
			},
			/** 新增comment操作 */
			handleCommentAdd(row) {
				this.commentCreateReset();
				if (row.contenttext != null) {
					this.createCommentForm.ismain = 1
					this.createCommentForm.isreply = 0
					this.createCommentForm.contentid = row.contentid


				} else {
					this.createCommentForm.ismain = 0
					this.createCommentForm.contentid = row.contentid
					if (row.ismain == 0) {
						this.createCommentForm.isreply = 1
						this.createCommentForm.replycommentid = row.replycommentid
						this.createCommentForm.replyuserid = row.userid

					} else {
						this.createCommentForm.isreply = 0
						this.createCommentForm.replycommentid = row.commentid
						this.createCommentForm.replyuserid = row.userid
					}
				}
				// if(row)
				this.createCommentOpen = true;

				this.title = "添加评论";
			},
			//重置评论参数
			commentCreateReset() {
				this.createCommentForm.userid = ''
				this.createCommentForm.commenttext = ''
				this.createCommentForm.replycommentid = null
				this.createCommentForm.replyuserid = null
			},
			// 取消按钮
			cancel() {
				this.createCommentOpen = false;
			},
			//新建评论提交
			submitCreateComment() {
				this.loading = true;
				if (this.createCommentForm.commenttext == null || this.createCommentForm.commenttext == '') {
					this.$message.error('未输入评论内容');
					this.loading = false;
					return
				}
				if (this.createCommentForm.userid == null || this.createCommentForm.userid == '') {
					this.$message.error('未选择评论人');
					this.loading = false;
					return
				}
				this.createCommentForm.createtime = new Date().getTime()
				this.createCommentForm.updatetime = new Date().getTime()
				this.$refs["createCommentForm"].validate(valid => {
					if (valid) {
						addComment(this.createCommentForm).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.loading = false;
							this.createCommentOpen = false;
							this.getCommentVos(this.currentSelectContent.contentid);
						});
					}
				});

			},
			handleComment(row) {
				this.commentReset();
				//给子组件传递userId
				this.showUserUpdateForm = true;
				this.targetRow = row;
				const commentid = row.commentid || this.ids
				getComment(commentid).then(response => {
					this.commentForm = response.data;
					this.commentForm.commentstate = row.commentstate.toString();
					//将此时的form复制一份，存起来
					this.commentOldForm = JSON.parse(JSON.stringify(this.commentForm))
					this.operatinForm.note = null;
					this.commentOpen = true;
					this.title = "修改评论";
				});
			},
			cancelEditComment() {
				this.showUserUpdateForm = false;
				this.commentOpen = false;
			},
			commentReset() {
				this.commentForm = {
					commentid: null,
					userid: null,
					contentid: null,
					replycommentid: null,
					isreply: null,
					replynickname: null,
					ismain: null,
					commenttext: null,
					commenturl: null,
					upnum: null,
					downnum: null,
					informnum: null,
					commentstate: null,
					createtime: null,
					updatetime: null
				};
				// this.resetForm("commentForm");
			},
			//这里要填写修改状态的逻辑
			submitCommentForm() {
				let that = this
				this.showUserUpdateForm = false;
				this.$refs["commentForm"].validate(valid => {
					if (valid) {
						if (this.commentForm.commentid != null) {
							//修改用户状态
							let code = that.$refs.userUpdateFormComment.updateUserInfo();
							//未填写禁言时间
							if (code == 0) {
								return
							}
							updateComment(this.commentForm).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.createOperationRecord(3, this.commentOldForm, this.commentForm)
								this.commentOpen = false;
								this.getCommentVos(this.commentForm.contentid);
							}).then(() => {

							});
						} else {
							addComment(this.commentForm).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.commentOpen = false;
								// this.getList();
								this.getCommentVos(this.commentForm.contentid);
							});
						}
					}
				});
				this.commentOpen = false;
			},
			//创建操作记录
			createOperationRecord(targetKind, oldInfo, newInfo) {
				console.log("触发")
				//构建操作记录
				this.operatinForm.schoolId = this.$store.state.user.currentSchool.schoolid;
				this.operatinForm.operator = this.$store.state.user.name;
				this.operatinForm.targetKind = targetKind;
				//操作对象为帖子
				if (targetKind == 2) {
					this.operatinForm.targetId = newInfo.contentid;
				}
				//操作对象为评论
				if (targetKind == 3) {
					this.operatinForm.targetId = newInfo.commentid;
				}
				this.operatinForm.changeInfo = {
					data: {
						oldForm: {},
						newForm: {}
					}
				};
				//获取变更了属性值
				let haveChange = 0;
				for (let key in newInfo) {
					let value = newInfo[key];
					// 在这里对属性进行处理
					// console.log(key + ': ' + typeof newInfo[key]);
					if (typeof newInfo[key] != 'object' && newInfo[key] != oldInfo[key]) {
						haveChange = 1
						this.operatinForm.changeInfo.data.oldForm[key] = oldInfo[key]
						this.operatinForm.changeInfo.data.newForm[key] = newInfo[key]
					}
					if (targetKind == 3 && key == 'contentid') {
						this.operatinForm.changeInfo.data.oldForm[key] = oldInfo[key]
						this.operatinForm.changeInfo.data.newForm[key] = newInfo[key]
					}
				}
				if (haveChange == 1) {
					this.operatinForm.changeInfo = JSON.stringify(this.operatinForm.changeInfo)
					console.log(this.operatinForm)
					addBbs_operation_record(this.operatinForm).then(response => {
						this.$modal.msgSuccess("操作记录新增成功");
					});
				}
			},
			//跳转用户界面
			toUserPage(data) {
				this.$emit('closeContentDetail');
				console.log('触发', data)
				this.$router.push({
					path: '/bbs_user_school/bbs_user',
					query: {
						id: data.userid
					}
				})
			},
		},
		watch: {
			"currentContentId": {
				handler(newVal, oldVal) {
					console.log("watch触发")
					this.onShowContentDetail()
				},
				deep: true
			}
		}
	}
</script>

<style>
	.post-text {
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
	}

	.dialog-footer {
		padding-top: 30px;
		padding-bottom: 10px;
		text-align: right;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
</style>